<template>
    <div class="logo">
        <transition name="logoFade">
            <div v-if="isCollapse" key="collapse">
                <img :src="logoSrc" alt="" @dblclick="refresh">
            </div>
            <div v-else key="expand">
                <img :src="logoSrc" alt="" @dblclick="refresh">
                <span @click="showVersion">罗格贝特</span>
            </div>
        </transition>
    </div>
</template>

<script>
import {mapActions, mapState} from 'vuex';
import {showVersion} from '@assets/js/api/demo';
import popup from '@assets/js/mixin/popup';

export default {
    name: 'logo',
    inject: ['reload'],
    mixins: [popup],
    computed: {
        ...mapState({
            isCollapse: (state) => state.navigate.isCollapse,
        }),
    },
    data() {
        return {
            logoSrc: '',
        };
    },
    methods: {
        ...mapActions(['refreshUser']),
        /* 页面刷新*/
        async refresh() {
            let self = this;
            const loading = self.loadingOpen();
            await self.refreshUser({router: self.$router});
            self.messageSuccess('刷新成功');
            self.reload();
            loading && loading.close();
        },
        /* 查看系统版本*/
        showVersion() {
            let self = this;
            showVersion().then((response) => {
                if (response.flag) {
                    self.messageSuccess(`当前版本：${response.data}`);
                } else {
                    self.messageError(response.msg);
                }
            });
        },
    },
};
</script>

<style scoped lang="scss">
    .logoFade-enter-active {
        transition: opacity 1.5s;
    }

    .logoFade-enter, .logoFade-leave-to {
        opacity: 0;
    }

    //标示
    .logo {
        background-color: var(--header-logo);
        height: 60px;
        line-height: 60px;
        text-align: center;

        //图标
        img {
            width: 36px;
            vertical-align: middle;
            cursor: pointer;
        }

        //标题
        span {
            color: white;
            display: inline-block;
            font-size: 22px;
            margin-left: 22px;
            cursor: pointer;
        }
    }
</style>
